<template>
  <el-container style="height: 100vh;">
    <!-- 左侧功能菜单 -->
    <el-aside width="250px" style="background-color: #f2f2f2;">
      <el-menu>
        <el-menu-item index="1" @click="switchFolder('inbox')">收件箱</el-menu-item>
        <el-menu-item index="2" @click="switchFolder('sent')">已发送</el-menu-item>
        <el-menu-item index="3" @click="switchFolder('draft')">草稿</el-menu-item>
        <el-menu-item index="4" @click="switchFolder('trash')">垃圾箱</el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 中间邮件列表 -->
    <el-container>
      <el-header style="background-color: #ffffff; text-align: left; padding-left: 20px;">
        <h3>{{ currentFolderName }}</h3>
        <!-- 邮件操作按钮 -->
        <el-button type="primary" @click="openComposeDialog">写邮件</el-button>
        <el-button type="warning" @click="replyEmail" :disabled="!selectedEmail">回复</el-button>
        <el-button type="info" @click="forwardEmail" :disabled="!selectedEmail">转发</el-button>
        <el-button type="danger" @click="deleteEmails" :disabled="selectedEmails.length === 0">删除</el-button>
        <el-button type="success" @click="markAsRead" :disabled="selectedEmails.length === 0">标记为已读</el-button>
      </el-header>

      <el-main style="padding: 0;">
        <el-table :data="emails" @row-click="showEmailDetails" @row-dblclick="openEmailDialog" @selection-change="handleSelectionChange" ref="emailTable" border>
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="subject" label="主题" width="400"></el-table-column>
          <el-table-column prop="sender" label="发件人" width="200"></el-table-column>
          <el-table-column prop="date" label="日期"></el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <!-- 邮件详细内容显示在右侧 -->
    <el-main style="background-color: #f9f9f9; padding: 20px; width: 300px;" v-if="selectedEmail">
      <h3>{{ selectedEmail.subject }}</h3>
      <p><strong>From:</strong> {{ selectedEmail.sender }}</p>
      <p><strong>Date:</strong> {{ selectedEmail.date }}</p>
      <el-divider></el-divider>
      <p>{{ selectedEmail.body }}</p>
    </el-main>
    <el-main v-else style="text-align: center; padding: 20px;">
      <p>请选择一封邮件查看详细信息</p>
    </el-main>

    <!-- 邮件详情弹框 -->
    <el-dialog title="邮件详情" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div v-if="selectedEmail">
        <h3>{{ selectedEmail.subject }}</h3>
        <p><strong>From:</strong> {{ selectedEmail.sender }}</p>
        <p><strong>Date:</strong> {{ selectedEmail.date }}</p>
        <el-divider></el-divider>
        <p>{{ selectedEmail.body }}</p>
      </div>
      <div v-else>
        <p>没有选中的邮件</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 写邮件/回复/转发 弹框 -->
    <el-dialog title="撰写邮件" :visible.sync="composeDialogVisible" width="50%">
      <el-form @submit.native.prevent="sendEmail">
        <el-form-item label="To:">
          <el-input v-model="newEmail.recipient" type="email" required></el-input>
        </el-form-item>
        <el-form-item label="Subject:">
          <el-input v-model="newEmail.subject" required></el-input>
        </el-form-item>
        <el-form-item label="Message:">
          <el-input type="textarea" v-model="newEmail.body" required></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sendEmail">发送</el-button>
          <el-button @click="composeDialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      currentFolder: 'inbox',
      currentFolderName: '收件箱',
      emails: [
        { id: 1, subject: 'Welcome to QQ Mail', sender: 'admin@qq.com', date: '2024-10-22', body: 'Welcome to your QQ mail!' },
        { id: 2, subject: 'Meeting Reminder', sender: 'boss@qq.com', date: '2024-10-23', body: 'Don\'t forget the meeting tomorrow at 10 AM.' }
      ],
      selectedEmail: null,
      selectedEmails: [],
      dialogVisible: false,
      composeDialogVisible: false,
      newEmail: {
        recipient: '',
        subject: '',
        body: ''
      }
    };
  },
  methods: {
    switchFolder(folder) {
      this.currentFolder = folder;
      switch (folder) {
        case 'inbox':
          this.currentFolderName = '收件箱';
          break;
        case 'sent':
          this.currentFolderName = '已发送';
          break;
        case 'draft':
          this.currentFolderName = '草稿';
          break;
        case 'trash':
          this.currentFolderName = '垃圾箱';
          break;
      }
      this.selectedEmail = null;
      this.selectedEmails = [];
      this.emails = this.getEmailsForFolder(folder);
    },
    getEmailsForFolder(folder) {
      // 模拟不同文件夹的邮件数据
      if (folder === 'inbox') {
        return [
          { id: 1, subject: 'Welcome to QQ Mail', sender: 'admin@qq.com', date: '2024-10-22', body: 'Welcome to your QQ mail!' },
          { id: 2, subject: 'Meeting Reminder', sender: 'boss@qq.com', date: '2024-10-23', body: 'Don\'t forget the meeting tomorrow at 10 AM.' }
        ];
      } else if (folder === 'sent') {
        return [
          { id: 3, subject: 'Project Update', sender: 'you@qq.com', date: '2024-10-20', body: 'Here is the project update...' }
        ];
      }
      return [];
    },
    showEmailDetails(row) {
      this.selectedEmail = row; // 在右侧显示邮件详细信息
    },
    openEmailDialog(row) {
      this.selectedEmail = row; // 双击时打开弹框
      this.dialogVisible = true;
    },
    openComposeDialog() {
      this.newEmail = { recipient: '', subject: '', body: '' }; // 清空表单
      this.composeDialogVisible = true; // 打开写邮件弹框
    },
    replyEmail() {
      if (this.selectedEmail) {
        this.newEmail.recipient = this.selectedEmail.sender;
        this.newEmail.subject = `回复: ${this.selectedEmail.subject}`;
        this.newEmail.body = `\n\n--- 原始邮件 ---\n${this.selectedEmail.body}`;
        this.composeDialogVisible = true;
      }
    },
    forwardEmail() {
      if (this.selectedEmail) {
        this.newEmail.subject = `转发: ${this.selectedEmail.subject}`;
        this.newEmail.body = `\n\n--- 转发邮件 ---\n${this.selectedEmail.body}`;
        this.composeDialogVisible = true;
      }
    },
    deleteEmails() {
      const remainingEmails = this.emails.filter(email => !this.selectedEmails.includes(email));
      this.emails = remainingEmails; // 更新邮件列表
      this.selectedEmails = []; // 清空已选邮件
      this.$message.success('邮件已删除');
    },
    markAsRead() {
      this.selectedEmails.forEach(email => {
        email.isRead = true; // 假设有个 isRead 字段
      });
      this.$message.success('已标记为已读');
      this.selectedEmails = [];
    },
    sendEmail() {
      // 模拟发送邮件的过程
      this.$message.success(`邮件已发送到: ${this.newEmail.recipient}`);
      this.composeDialogVisible = false; // 关闭撰写邮件弹框
    },
    handleSelectionChange(val) {
      this.selectedEmails = val; // 记录选择的邮件
    },
    handleClose() {
      this.dialogVisible = false; // 关闭查看详情的弹框
    }
  }
};
</script>

<style scoped>
.el-header h3 {
  margin: 0;
}
</style>
